<template>
  <div>
    <el-card class="box-card" style="height: 800px">
      <!--      输入栏部分-->
      <div class="text item" :style="height">
        <!--        第一行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">类别：</span>
                <template>
                  <el-select v-model="value2" filterable placeholder="请输入类别" style="width: 330px"  size="mini">
                    <el-option
                        v-for="item in options2"
                        :key="item.value2"
                        :label="item.label2"
                        :value="item.value2">
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">关键词：</span>
                <el-input
                    placeholder="请输入条码、名称、规格、型号"
                    v-model="input2"
                    size="mini"
                    style="width: 330px">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">颜色：</span>
                <el-input
                    placeholder="请输入颜色查询"
                    v-model="input2"
                    size="mini"
                    style="width: 330px">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <el-button type="primary" @click="">查 询</el-button>
                <el-button @click="">重 置</el-button>
                <div style="display: inline-block;color: #40a9ff;cursor: pointer" @click="active()">
                  <span style="margin-left: 20px">{{ dj }}</span>
                  <div style="display: inline-block">
                    <svg :t="t" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" :p-id="p_id" width="14" height="14">
                      <path
                          :d="d"
                          :p-id="p_id" fill="#1296db">
                      </path>
                    </svg>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--        第二行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">基础重量：</span>
                <el-input
                    placeholder="请输入基础重量查询"
                    v-model="input2"
                    size="mini"
                    style="width: 70%">
                </el-input>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">保质期：</span>
                <template>
                  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="0" :max="20" size="mini" style="width: 290px">

                  </el-input-number>
                    <el-option
                        v-for="item in options2"
                        :key="item.value2"
                        :label="item.label2"
                        :value="item.value2"
                    >
                    </el-option>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px;">状态：</span>
                <template>
                  <el-select v-model="value3" placeholder="请选择"  size="mini" style="width: 290px">
                    <el-option
                        v-for="item in options"
                        :key="item.value3"
                        :label="item.label3"
                        :value="item.value3"
                       >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">序列号：</span>
                <template>
                  <el-select v-model="value4" placeholder="有无序列号"  size="mini" style="width: 290px">
                    <el-option
                        v-for="item in options4"
                        :key="item.value4"
                        :label="item.label4"
                        :value="item.value4"
                        >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
          </el-row>
        </div>

        <!--        第三行输入框-->
        <div style="margin-bottom: 20px">
          <el-row>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">批号：</span>
                <template>
                  <el-select v-model="value5" placeholder="有无批号" style="width: 70%"  size="mini">
                    <el-option
                        v-for="item in options5"
                        :key="item.value5"
                        :label="item.label5"
                        :value="item.value5"
                       >
                    </el-option>
                  </el-select>
                </template>
              </div>
            </el-col>
            <el-col :span="6">
              <div>
                <span style="margin-right: 25px">备注：</span>
                <el-input
                    placeholder="请输入备注查询"
                    v-model="input3"
                    style="width: 70%" size="mini">
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!--      新增操作以及表格部分-->
      <div>
        <!--        按钮部分-->
        <el-button type="primary"  @click="outerVisible = true" style="margin-right: 10px">
          <i class="el-icon-plus"></i> 新增</el-button>

        <el-button type="primary"><i class="el-icon-top"></i>导入</el-button>
        <el-button type="primary"><i class="el-icon-bottom"></i>导出</el-button>

        <el-dropdown>
          <el-button plain style="margin-left: 10px">
            批量操作
            <svg t="1654231867884"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2287" width="12" height="12">
              <path
                  d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                  p-id="2288" fill="#409EFF"></path>
            </svg>
          </el-button>

          <el-popover
              placement="right"
              width="400"
              trigger="click"
              style="margin-left: 10px"
          >

            <el-checkbox-group v-model="checkList" style="width: 500px;height: 140px">
              <div>
                <el-row>
                  <el-col>
                    <el-checkbox label="条码"></el-checkbox>
                    <el-checkbox label="名称" style="margin-left: 70px"></el-checkbox>
                    <el-checkbox label="规格" style="margin-left: 70px"></el-checkbox>
                  </el-col>
                  <el-col>
                    <el-checkbox label="型号"></el-checkbox>
                    <el-checkbox label="颜色" style="margin-left: 70px"></el-checkbox>
                    <el-checkbox label="类别" style="margin-left: 70px"></el-checkbox>
                  </el-col>
                  <el-col>
                    <el-checkbox label="扩展信息"></el-checkbox>
                    <el-checkbox label="单位" style="margin-left: 42px"></el-checkbox>
                    <el-checkbox label="基础重量" style="margin-left: 70px"></el-checkbox>
                  </el-col>
                  <el-col>
                    <el-checkbox label="保质期"></el-checkbox>
                    <el-checkbox label="库存" style="margin-left: 56px"></el-checkbox>
                    <el-checkbox label="采购价" style="margin-left: 70px"></el-checkbox>
                  </el-col>
                  <el-col>
                    <el-checkbox label="零售价"></el-checkbox>
                    <el-checkbox label="销售价" style="margin-left: 56px"></el-checkbox>
                    <el-checkbox label="最低售价" style="margin-left: 56px"></el-checkbox>
                  </el-col>
                  <el-col>
                    <el-checkbox label="备注"></el-checkbox>
                    <el-checkbox label="状态" style="margin-left: 70px"></el-checkbox>
                    <el-checkbox label="序列号" style="margin-left: 70px"></el-checkbox>
                  </el-col>
                  <el-col>
                    <el-checkbox label="批号"></el-checkbox>
                    <el-checkbox label="操作" style="margin-left: 70px"></el-checkbox>
                  </el-col>
                </el-row>
              </div>
            </el-checkbox-group>

            <el-button slot="reference">
              <i class="el-icon-setting" style="margin-right: 5px"></i>列设置
            </el-button>
          </el-popover>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-delete">删除</el-dropdown-item>
            <el-dropdown-item icon="el-icon-folder-checked">启用</el-dropdown-item>
            <el-dropdown-item icon="el-icon-folder-delete">禁用</el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit">批量编辑</el-dropdown-item>
            <el-dropdown-item icon="el-icon-edit-outline">修正库存</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!--        表格部分-->
        <div style="margin-top: 20px">
          <el-table
              border
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">

            <el-table-column
                type="selection"
                width="35">
            </el-table-column>
            <el-table-column
                label="条码"
                width="80">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                label="名称"
                width="80">
              <template slot-scope="scope">{{ scope.row.number}}</template>
            </el-table-column>
            <el-table-column
                label="规格"
                width="80">
              <template slot-scope="scope">{{ scope.row.info}}</template>
            </el-table-column>
            <el-table-column
                label="型号"
                width="80">
              <template slot-scope="scope">{{ scope.row.date}}</template>
            </el-table-column>
            <el-table-column
                label="颜色"
                width="80">
              <template slot-scope="scope">{{ scope.row.operator}}</template>
            </el-table-column>
            <el-table-column
                label="类别"
                width="80">
              <template slot-scope="scope">{{ scope.row.amount}}</template>
            </el-table-column>
            <el-table-column
                label="扩展信息"
                width="80">
              <template slot-scope="scope">{{ scope.row.get}}</template>
            </el-table-column>
            <el-table-column
                label="单位"
                width="80">
              <template slot-scope="scope">{{ scope.row.change}}</template>
            </el-table-column>
            <el-table-column
                label="基础重量"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="保质期"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="库存"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="采购价"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="零售价"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="销售价"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="最低售价"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="备注"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="状态"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="序列号"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="批号"
                width="80">
              <template slot-scope="scope">{{ scope.row.state}}</template>
            </el-table-column>
            <el-table-column
                label="操作"
                min-width="80">
              <template slot-scope="scope">
                <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)"
                               title="这是一段内容确定删除吗？">
                  <el-button size="mini"
                             type="danger" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <!--            <div style="margin-top: 20px">-->
          <!--              <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>-->
          <!--              <el-button @click="toggleSelection()">取消选择</el-button>-->
          <!--            </div>-->
        </div>

      </div>

      <!--      新增操作弹框-->
      <div>
        <!--        外层的弹框-->
        <el-dialog title="新增" :visible.sync="outerVisible" width="80%" style="min-width: 1600px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
              <el-form :model="form">
              <el-row>

                <el-col span="6">
                  <el-form-item
                      label="名称：" :label-width="formLabelWidth"
                      :rules="[
                                { required: true, message: '名称不能为空'}
                              ]"
                  >
                    <el-input v-model="input" size="mini" style="width: 200px" placeholder="请输入名称"></el-input>
                  </el-form-item>
                </el-col>

                <el-col span="6">
                  <el-form-item label="规格：" :label-width="formLabelWidth">
                    <el-input style="width: 200px" size="mini" placeholder="请输入规格">
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col span="6">
                  <el-form-item label="型号：" :label-width="formLabelWidth">
                    <el-input v-model="form.region" size="mini" style="width: 200px" placeholder="请输入型号">
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col span="6">
                  <el-form-item label="单位：" :label-width="formLabelWidth">
                    <el-input v-model="form.region" size="mini" style="width: 200px" placeholder="请输入单位">
                    </el-input>
                    <el-checkbox v-model="checked">多单位</el-checkbox>
                  </el-form-item>
                </el-col>

              </el-row>
              </el-form>

<!--            第二行  -->
              <el-form :model="form">
                <el-row>

                  <el-col span="6">
                    <el-form-item label="颜色：" :label-width="formLabelWidth">
                      <el-input style="width: 200px" size="mini" placeholder="请输入颜色">
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col span="6">
                    <el-form-item label="基本重量" :label-width="formLabelWidth">
                      <el-input style="width: 200px" size="mini" placeholder="请输入基本重量">
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col span="6">
                    <el-form-item label="保质期：" :label-width="formLabelWidth">
                      <el-input v-model="form.region" size="mini" style="width: 200px" placeholder="请输入保质期">
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col span="6">
                    <el-form-item label="类别：" :label-width="formLabelWidth">
                      <el-select v-model="form.region" size="mini" style="width: 200px" placeholder="请输入类别">
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <el-form :model="form">
                <el-row>

                  <el-col span="6">
                    <el-form-item label="序列号：" :label-width="formLabelWidth">
                        <el-select v-model="form.region" size="mini" placeholder="有无序列号">
                          <el-option label="有"></el-option>
                          <el-option label="无"></el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col span="6">
                    <el-form-item label="批号：" :label-width="formLabelWidth">
                      <el-select v-model="form.region" size="mini" placeholder="有无批号">
                        <el-option label="有"></el-option>
                        <el-option label="无"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col span="6">
                    <el-form-item label="多属性：">
                      <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                  </el-col>

                  <el-col span="6"></el-col>

                  <el-row>
                    <el-col>
                      <el-button type="primary" size="mini"><i class="el-icon-plus"></i>新增行</el-button>
                      <el-button size="mini">采购价-批量</el-button>
                      <el-button size="mini">零售价-批量</el-button>
                      <el-button size="mini">销售价-批量</el-button>
                      <el-button size="mini">最低售价-批量</el-button>
                    </el-col>
                  </el-row>
                </el-row>
                <div style="margin-top: 20px">
                  <el-table
                      border
                      ref="multipleTable"
                      :data="tableData"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange">

                    <el-table-column
                        type="selection"
                        width="35">
                    </el-table-column>
                    <el-table-column
                        label="条码"
                        width="80">
                      <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                        label="单位"
                        width="300">
                      <template slot-scope="scope">{{ scope.row.number}}</template>
                    </el-table-column>
                    <el-table-column
                        label="采购价"
                        width="200">
                      <template slot-scope="scope">{{ scope.row.info}}</template>
                    </el-table-column>
                    <el-table-column
                        label="零售价"
                        width="200">
                      <template slot-scope="scope">{{ scope.row.date}}</template>
                    </el-table-column>
                    <el-table-column
                        label="销售价"
                        width="200">
                      <template slot-scope="scope">{{ scope.row.operator}}</template>
                    </el-table-column>
                    <el-table-column
                        label="最低售价"
                        width="">
                      <template slot-scope="scope">{{ scope.row.amount}}</template>
                    </el-table-column>
                  </el-table>

                  <el-table
                      ref="multipleTable"
                      :data="tableData"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange">
                    <el-table-column
                        type="selection"
                        width="55">
                      <el-input v-model="input4" placeholder="请输入内容"></el-input>
                    </el-table-column>
                    <el-table-column
                        label="日期"
                        width="120">
                      <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址"
                        show-overflow-tooltip>
                    </el-table-column>
                  </el-table>
                </div>

      </el-form>
            </el-tab-pane>

            <el-tab-pane label="扩散信息" name="second">
              <el-form :model="form">
                <div style="width: 100%;height: 660px">
                <el-form-item label="制造商：" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="自定义1：" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="自定义2：" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="自定义3：" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                </div>
              </el-form>

            </el-tab-pane>
            <el-tab-pane label="库存数量" name="third">
              <el-row>
                <el-col>
                  <el-button @click="open">初期库存-批量</el-button>
                  <el-button @click="open">最低安全库存-批量</el-button>
                  <el-button @click="open">最高安全库存-批量</el-button>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="图片信息" name="fourth">

            </el-tab-pane>
          </el-tabs>
          <el-divider></el-divider>
          <div style="width: 960px;margin: 0;">
            <div slot="footer" class="dialog-footer" style="margin-left: 750px;">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "RetailOutWarehouse",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      num: 0,
      restaurants: [],
      options1: [
        {
          value1: '选项1',
          label1: '123'
        }, {
          value1: '选项2',
          label1: '456'
        }, {
          value1: '选项3',
          label1: '789'
        }, {
          value1: '选项4',
          label1: '987'
        }, {
          value1: '选项5',
          label1: '654'
        }],

      options2: [],
      options3: [],
      options4: [
        {
          value4: '选项1',
          label4: '有'
        },
        {
          value4: '选项2',
          label4: '无'
        }
      ],
      options5:[{
        value5: '选项1',
        label5: '有'
      }, {
        value5: '选项2',
        label5: '无'
      }],
      options6:[],
      options8:[{
        value8:'选项1',
        label8:'现付'
      }],
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      value5:'',
      value6:'',
      value7date:'',
      value8:'先付',
      input1: '',
      input2: '',
      input3:'',
      input4:'',

      t: '1654086700588',
      p_id: '2321',
      d: 'M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z',
      dj: '展开',
      tableData: [],
      multipleSelection: [],
      outerVisible: false,
      innerVisible: false,
      options: [{
        value3: '选项1',
        label3: '启用'
      }, {
        value3: '选项2',
        label3: '禁用'
      },],
      value: '',
      /*新增标签栏*/
      activeName: 'second',
      /*扩散信息*/
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      /*选择按钮*/
      checked: true,
      /*开关按钮*/
      activeNames: ['1'],
      /*列设置复选框*/
      checkList: ['选中且禁用','复选框 A']
    };

  }, methods: {
    handleChange(value) {
      console.log(value);
    },
    /*多属性开关*/
    handleChange1(val) {
      console.log(val);
    },
    active() {
      if (this.height === 'height: 40px') {
        this.height = 'height: 150px'
        this.dj = '收起'
        this.t = '1654086445974'
        this.p_id = '2147'
        this.d = 'M910.222222 796.444444c-17.066667 0-34.133333-5.688889-45.511111-17.066666L551.822222 409.6c-11.377778-5.688889-17.066667-11.377778-34.133333-11.377778-5.688889 0-22.755556 5.688889-28.444445 11.377778l-329.955555 364.088889c-22.755556 22.755556-56.888889 22.755556-79.644445 5.688889-22.755556-22.755556-22.755556-56.888889-5.688888-79.644445l329.955555-364.088889c28.444444-34.133333 73.955556-51.2 119.466667-51.2s85.333333 22.755556 119.466666 56.888889l312.888889 364.088889c22.755556 22.755556 17.066667 56.888889-5.688889 79.644445-11.377778 5.688889-28.444444 11.377778-39.822222 11.377777z'
      } else {
        this.height = 'height: 40px'
        this.dj = '展开'
        this.t = '1654086700588'
        this.p_id = '2321'
        this.d = 'M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z'
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(index,row){
      console.log(index+"==="+row.name);
      this.tableData.splice(index,1);
    },
    /*新增标签栏*/
    handleClick(tab, event) {
      console.log(tab, event);
    },
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  overflow: hidden;
  transition: all 0.5s;
}


.box-card {
  margin: 10px 10px 10px 10px;
  height: 600px;
}


</style>
